<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .wrapper {
    height: 100vh;
    /*This part is important for centering*/
    display: grid;
    place-items: center;
  }

  .typing-demo {
    width: 30ch;
    animation: typing 2s steps(22), blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2em;
  }

  @keyframes typing {
    from {
      width: 0
    }
  }

  @keyframes blink {
    50% {
      border-color: transparent
    }
  }
</style>

<body>
  <div class="wrapper">
    <div class="typing-demo">
      长相思兮长相忆 短相思兮无穷极
    </div>
  </div>
</body>

</html>